<template>
  <div
    v-if="dialogVis"
    class="overlay"
    :style="{
      top: props.top,
      left: props.left,
    }"
  />
  <div
    v-if="dialogVis"
    ref="dialogRef"
    class="dialog"
    :style="{
      width: props.width,
      height: props.height,
      background: backgroundStyle,
      backgroundSize: '100% 100%',
      top: props.topDialog,
      left: props.leftDialog,
    }"
  >
    <div class="dialog-close absolute right-10px top-15px z-1 cursor-pointer color-#fff" @click="handleClose">
      <SvgIconIndex icon-class="关闭" size="30px" class="cursor-pointer" color="#fff" />
    </div>
    <div
      class="dialog-header relative h-50px flex pl-20px pt-10px lh-50px"
      :draggable="false"
      @mousedown="handleDown"
      @mouseup="handleUp"
    >
      <div v-if="props.title" class="dialog-title w-100% text-20px color-#fff">{{ props.title }}</div>
      <slot v-else name="title"></slot>
    </div>
    <div class="dialog-content">
      <slot> </slot>
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref, defineProps, defineEmits, computed } from 'vue';
import SvgIconIndex from '@/components/SvgIconIndex.vue';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  width: {
    type: [Number, String],
    default: '500px',
  },
  height: {
    type: [Number, String],
    default: '400px',
  },
  top: {
    type: [Number, String],
    default: '-5.125rem',
  },
  left: {
    type: [Number, String],
    default: '-1.0625rem',
  },
  topDialog: {
    type: [Number, String],
    default: '50%',
  },
  leftDialog: {
    type: [Number, String],
    default: '50%',
  },
});

const emit = defineEmits(['close', 'update']);
const dialogVis = ref(true);
const dialogRef = ref();

const backgroundStyle = computed(() => {
  if (props.title === '气象分析') {
    return `url(${new URL('@/assets/images/img/弹窗背景1.png', import.meta.url).href}) no-repeat`;
  } else {
    return `url(${new URL('@/assets/images/img/弹窗背景.png', import.meta.url).href}) no-repeat`;
  }
});

const handleClose = () => {
  emit('update', false);
  emit('close');
};

const handleDown = (e) => {
  const dialog = document.querySelector('.dialog');

  e.target.style.cursor = 'move';

  var distX = e.pageX - dialog.offsetLeft;
  var distY = e.pageY - dialog.offsetTop;

  document.onmousemove = function (mouse) {
    e.preventDefault();
    e.stopPropagation();

    // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
    let left = mouse.clientX - distX;
    let top = mouse.clientY - distY;

    if (top <= 0) {
      top = 0;
    } else if (top >= document.documentElement.clientHeight - e.target.clientHeight) {
      top = document.documentElement.clientHeight - e.target.clientHeight;
    }

    if (left <= 0) {
      left = 0;
    } else if (left >= document.documentElement.clientWidth - e.target.clientWidth) {
      left = document.documentElement.clientWidth - e.target.clientWidth;
    }

    dialog.style.left = left + 'px';
    dialog.style.top = top + 'px';
  };

  document.onmouseup = function () {
    e.target.style.cursor = 'default';
    document.onmousemove = null;
    document.onmouseup = null;
  };
};

const handleUp = (e) => {
  e.target.style.cursor = 'default';
  document.onmousemove = null;
};

onMounted(() => {
  nextTick(() => {
    // const { width, height } = dialogRef.value.getBoundingClientRect();
    // dialogRef.value.style.left = (document.documentElement.clientWidth - width) / 2 + 'px';
    // dialogRef.value.style.top = (document.documentElement.clientHeight - height) / 2 + 'px';
  });
});
</script>
<style scoped lang="scss">
.overlay {
  position: absolute;
  z-index: 98;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.dialog {
  position: fixed;
  z-index: 99;
  // background: linear-gradient(166deg, #7f7f7f 14%, #383838 90%);
  // background: url(@/assets/images/img/弹窗背景.png) no-repeat;

  .dialog-content {
    height: calc(100% - 50px);
  }
}
</style>
